<template>
    <div>
        <el-button type="success" @click="insertRole = true">添加管理员</el-button>
        <div style="display: inline-block">
            <a href=" "  title="刷新" class="refresh" @click="refresh()">
                <el-button type="success">刷新</el-button> </a>
        </div>

        <el-form :inline="true" :model="roleSearch" class="demo-form-inline">
            <el-form-item label="名称">
                <el-input v-model="roleSearch.realname" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                        v-model="roleSearch.beginDate" type="date" placeholder="起始时间"
                        :picker-options="pickerOptions">
                </el-date-picker>
                <el-date-picker
                        v-model="roleSearch.endDate" type="date" placeholder="结束时间"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="initTable">查询</el-button>
            </el-form-item>
        </el-form>
<!--        用户表-->
        <el-table
                :data="userTable"
                border
                style="width: 100%" >
            <el-table-column
                    prop="id"
                    label="用户编号"
                    sortable
                    width="160" fixed>
            </el-table-column>
            <el-table-column
                    prop="realname"
                    label="用户名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="tel"
                    label="用户电话" width="200px">
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="用户头像"  width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.url" width="50px" height="50px">
                </template>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="用户地址"  width="120">
            </el-table-column>
            <el-table-column prop="isDeteled" label="用户状态"  width="120">
                <template slot-scope="scope">
                    <!--三目表达式判断删除状态-->
                    <el-tag size="medium"> {{ scope.row.isDeleted==0?"存在":"注销" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="gmtCreate" label="创建时间" width="200px">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="250px">
                <template slot-scope="scope">
                    <el-button @click="updateHuiXian(scope.row)" type="primary" size="small">修改</el-button>
                    <el-button @click="del(scope.row.id)" type="success" size="small">注销</el-button>
<!--                    <el-button type="danger" @click="huixianRole(scope.row)" size="small">分配角色</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <!--        分页组件-->
        <!--分页功能
  @size-change:控制每页条数
 -->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!--添加验证弹出框-->
        <el-dialog title="添加管理员信息" :visible.sync="insertRole"  width="30%">
            <el-form :model="insertForm" :rules="rules" ref="insertForm">
                <el-form-item label="用户图片" prop="url">
                    <el-upload
                            :action="'http://192.168.1.18:81/user/upload'"
                            :show-file-list="false"
                            :on-success="handleSuccess2"
                            :on-error="handleError"
                            :before-upload="beforeUpload"
                            class="avatar-uploader">
                        <img style="height: 180px;width: 200px"  v-if="insertForm.url" :src="updateForm.url">
                        <i v-else class="el-icon-plus avatar-uploader-icon" />
                    </el-upload>
                </el-form-item>
                <el-form-item label="用户名字" label-width="90px" prop="realname">
                    <el-input v-model="insertForm.realname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色电话" label-width="90px" prop="tel">
                    <el-input v-model="insertForm.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户地址" label-width="90px" prop="address">
                    <el-input v-model="insertForm.address" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="insertRole = false">取 消</el-button>
                <el-button @click="resetForm('insertForm')">重置</el-button>
                <el-button type="primary" @click="insertUserRole()">确 定</el-button>
            </div>
        </el-dialog>

        <!--修改验证弹出框-->
        <el-dialog title="修改用户信息" :visible.sync="product"  width="30%">
            <el-form :model="updateForm" :rules="rules" ref="updateRuleForm">
                <el-form-item label="用户图片" prop="url">
                    <el-upload
                            :action="'http://192.168.1.18:81/user/upload'"
                            :show-file-list="false"
                            :on-success="handleSuccess"
                            :on-error="handleError"
                            :before-upload="beforeUpload"
                            class="avatar-uploader">
                        <img style="height: 180px;width: 200px"  v-if="updateForm.url" :src="updateForm.url">
                        <i v-else class="el-icon-plus avatar-uploader-icon" />
                    </el-upload>
                </el-form-item>
                <el-form-item label="用户名字" label-width="90px" prop="realname">
                    <el-input v-model="updateForm.realname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色电话" label-width="90px" prop="tel">
                    <el-input v-model="updateForm.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户地址" label-width="90px" prop="address">
                    <el-input v-model="updateForm.address" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="product = false">取 消</el-button>
                <el-button type="primary" @click="updates">确 定</el-button>
            </div>
        </el-dialog>
        <!--        修改状态提醒弹出层-->
        <el-dialog
                title="提示"
                :visible.sync="Visible"
                width="30%">
            <span>此用户已经注销，所有内容无法修改</span>
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="Visible = false">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "lists",
        data(){
            return {
                //添加信息
                insertForm:{},
                //添加弹出框
                insertRole:false,
                currentRow: null,
                //role表单
                roleData:{},
                //用户角色弹出层
                roleVisible:false,
                //角色选择框
                //roles:{},
                //修改信息框的初始状态
                product:false,
             //   修改的校验规则
                rules:{
                        realname: [
                            {required: true, message: '请输入真实姓名', trigger: 'blur'},
                            {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'},
                            //{required: true, validator: validatePass, trigger: 'blur'}
                        ],
                        tel: [
                            {required: true, message: '请输入电话', trigger: 'blur'},
                            {min: 1, max: 11, message: '长度在 1 到 11 个字符', trigger: 'blur'}
                        ],
                        address: [
                            {required: true, message: '请输入地址', trigger: 'blur'},
                            {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                        ],
                },
                //修改状态判断弹出层
                Visible:false,
                //修改框
                updateForm:{},
                //搜索框时间设计
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                role:{},
                //用户搜索框
                roleSearch: {},
                //用户信息框
                userTable: [],
                //总页数
                total: 0,
                //当前页
                currentPage: 1,
                //调整每页显示条数
                pageSizes: [5, 8, 10, 12],
                //每页条数
                pageSize: 5,
            }
    },
    created() {
    this.initTable();
    this.huixianRole();
    },
    methods:{
        //添加重置
        resetForm(insertForm){
            this.insertForm={};
        },
            //增加管理员的方法
        insertUserRole(){
            this.$refs['insertForm'].validate((valid) => {
                if (valid) {
                    this.$http.post("/user/user/insertUser", this.insertForm).then(result => {
                        if (result.data.code === 2000) {
                            console.log(result)
                            this.insertRole = false;
                            this.initTable();
                            this.$message.success(result.data.msg)
                        }

                    })
                }
            })
        },

        roleCurrentChange(val) {
            this.currentRow = 2;
        },
         //查询全部角色名
        huixianRole(row){
            this.$http.post("/user/user/findAllRole").then(result => {
                this.roleVisible=true;
                // console.log(result);
                // console.log("8888888888888")
                this.roleData=result.data.data;

            })


        },
        updates(){
            this.$refs['updateRuleForm'].validate((valid) => {
                if (valid) {
                    console.log("----------修改用户----------------")
                    this.$http.post("/user/user/updateUser",this.updateForm).then(result=>{
                        console.log(result)
                        if(result.data.code===2000){
                            this.$message.success(result.data.msg);
                            this.product=false;
                            this.initTable();
                        }else{
                            this.$message.error(result.data.msg);
                        }
                    })
                }
            });

        },

        //修改信息回显
        updateHuiXian(row){
             console.log(row)
            // console.log("7777777777777")
            if(row.isDeleted==true){
                this.Visible=true;
            }else{
                this.product=true;
                this.updateForm=row;
                this.updateForm=JSON.parse(JSON.stringify(row));
            }

        },
        handleError(res) {
            this.$message.error(res.message);
        },
        beforeUpload(file) {
            let isJpg = file.type === "image/jpeg";
            if (!isJpg) {
                this.$message.error("上传头像图片只能是JPG格式！");
                return false;
            }
            let isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.$message.error("上传头像图片不能超过2MB！");
                return false;
            }
            return true;
        },
        //修改用户头像成功后触发的函数
        handleSuccess(res, file) {
            // console.log("修改图片")
            // console.log(res)
            // console.log(file)
            this.updateForm.url = res;
        },
        //增加管理员时候的图片
        handleSuccess2(res,file) {
            this.insertForm.url = res;
        },


        //显示每页条数
        handleSizeChange(val) {
            this.pageSize = val;
            this.initTable();
        },
        //当前页第几页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.initTable();
        },
        del(id){
            this.$http.post("/user/user/deleteUser?id="+id).then(result=>{
                // console.log(id+"000000000000id")
                // console.log(result)
                if(result.data.code===2000){
                    this.initTable();
                }
            })
        },

        //查询用户表格
        initTable() {
            this.$http.post("/user/user/findInfo?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.roleSearch).then(result => {
                //模糊查询的语句
                this.userTable=result.data.data.users.records;
                this.total=result.data.data.tolal;
              // console.log("ssssssssss"+result.data.data.tolal)
                console.log(result)
            })
        },

    }
    }
</script>

<style>
    html, body, #app {
        height: 100%;
    }

    body, #app {
        padding: 0px;
        margin: 0px;
    }

    .el-container {
        height: 100%;
    }

    .el-header, .el-footer {
        background-color: grey;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        background-color: darkgrey;
        color: #333;
        line-height: 560px;
    }

    .el-aside > .el-menu {
        border: none;
    }

    .el-main {
        background-color: lightgrey;
        color: darkolivegreen;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>